<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="12" class="basic">
          <span class="traing"></span>最大力量
          <span class="traing"></span>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" class="newill" @click="harderClick">
            <i class="el-icon-thumb"></i>
            <span>查看历史</span>
          </el-button>
        </el-col>
      </el-row>
      <el-row class="sportraing1">
        <el-col :span="6" v-for="(item, index) in healthy" :key="index">
          <div class="stong">
            <span class="Ranking">{{item.model}}</span>
            <p class="sportraing1">{{item.distance}}</p>
            <p class="sportraing2">{{item.num}}</p>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="basicstyle">
      <el-row>
        <el-col :span="12" class="basic">
          <span class="traing"></span>基本身体素质
          <span class="traing"></span>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" class="newill" @click="harderClick">
            <i class="el-icon-thumb"></i>
            <span>查看历史</span>
          </el-button>
        </el-col>
      </el-row>
      <el-row class="sportraing1">
        <el-col :span="6" v-for="(item, index) in getlist" :key="index">
          <div class="stong">
            <span class="Ranking">{{item.ranks}}</span>
            <p class="sportraing1">{{item.jumping}}</p>
            <p class="sportraing2">{{item.rice}}</p>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-row>
        <el-col :span="24" class="basic">
          <span class="traing"></span>雷达分析报告
          <span class="traing"></span>
        </el-col>
      </el-row>
      <div class="flagcharts">
          <div v-if="flag" style="width:500px; height: 400px;" ><Radarchart :config="config" id="chart1"></Radarchart></div>
          <div v-if="flag" style="width:500px; height: 400px;" ><Radarchart :config="config" id="chart2"></Radarchart></div>
          <div v-if="flag" style="width:500px; height: 400px;" ><Radarchart :config="config" id="chart3"></Radarchart></div>
      </div>
    </el-card>
  </div>
</template>
<script>
import Radarchart from "@/components/echarts/Radarchart";
import {traingPhysical,besttraingPhysical,radarchart} from "@/api/monitor/logininfor";
import { valueOf } from 'screenfull';
export default {
  components: { Radarchart },
  data() {
    return {
      healthy: [
        {
          model: "队里第7名",
          distance: "卧推",
          num: "98kg",
        },
        {
          model: "队里第7名",
          distance: "卧推",
          num: "98kg",
        },
        {
          model: "队里第7名",
          distance: "卧推",
          num: "98kg",
        },
        {
          model: "队里第7名",
          distance: "卧推",
          num: "98kg",
        },
      ],
      jobId:'',
      getlist: [
        {
          ranks: "队里第7名",
          jumping: "垂直纵跳",
          rice: "3.5",
        },
      ],
      config:{
        data:[],
        name:[]
      },
      flag: false,
    };
  },
  methods:{
      
    harderClick(){
      this.$router.push( {path: "/gen/history"} )
    },

    // 雷达图
    bodychart(){
      radarchart({
        sportsManId:this.$route.query.id
      }).then((res)=>{
        console.log(res,77777)
        // 对全部数据进行分组处理
        // 最大量 "卧推" "卧拉" "硬拉"  "深蹲" "高翻"
        let maxPower = ['verticalJump', 'run30m', 'anteflexion', 'threeStepJump', 'run3000m']
        // 耐力 ?????????????????????????
        let endurance = ['verticalJump', 'anteflexion', 'run30m', 'run3000m', 'threeStepJump', 'threeStepJump', 'threeStepJump', 'threeStepJump' ]
        var value = [];
        this.config.name = res.data[0].bodyFunction.map((e)=>{
          e.name = e.name;
          value.push(e.value);
          return e;
        });
        this.flag = true;
        this.config.data = [
            {
              value:value,
              name:'理想值'
            }
          ]
        console.log( '1111' )
        console.log(this.config)
      }).catch((res)=>{})
    },
    besttraingpk(){
      
      traingPhysical(this.$route.query.id).then((res)=>{
        
      }).catch((res)=>{})
      besttraingPhysical(this.$route.query.id).then((res)=>{
        
      }).catch((res)=>{})
    },
    
  },
   mounted() {
    
  },
  created(){
    this.besttraingpk();
    this.bodychart();
  }
};
</script>
<style scoped>
.basic {
  margin-bottom: 40px;
  text-align: left;
}
.stauts {
  margin-top: 20px;
}
.traing {
  display: inline-block;
  width: 14px;
  height: 8px;
  background-color: #2583ff;
  margin-right: 7px;
  margin-left: 7px;
}
.stong {
  width: 250px;
  height: 300px;
  border: 1px solid #2583ff;
  position: relative;
}
.stong .Ranking {
  width: 160px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #ffdeeeff;
  border-radius: 22px;
  position: absolute;
  top: -21px;
  left: 43px;
}
.sportraing1,
.sportraing2 {
  text-align: center;
}
.sportraing1 {
  margin-top: 58px;
}
#picture{
    height:300px;
}
#chart1,#chart2,#chart3{
  width:300px;
  height:300px;
}
.flagcharts{
  display: flex;
  justify-content: center;
}
.flagcharts div{
  margin-left:50px;
}
</style>